<!--
	此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=pie-simple
-->
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
    <meta charset="utf-8">
    <style>
        .chart-container {
            width: 50%;
            height: 100%;
            float: left;
        }
    </style>
</head>
<body style="height: 100%; margin: 0">
<div class="chart-container">
    <div id="container1" style="height: 100%"></div>
</div>
<div class="chart-container">
    <div id="container2" style="height: 100%"></div>
</div>


<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>

<script type="text/javascript">
    // 获取审核问题订单的数量
    function getProblemOrderCount() {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://127.0.0.1:8080/order/getStatus4OrderCount');
        xhr.onreadystatechange = function () {
            if (xhr.readyState === XMLHttpRequest.DONE) {
                if (xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    if (response.code === 0) {
                        var problemOrderCount = response.data;
                        drawProblemOrderChart(problemOrderCount);
                    }
                } else {
                    console.error('Error:', xhr.status);
                }
            }
        };
        xhr.send();
    }

    // 绘制审核问题订单的饼状图
    function drawProblemOrderChart(count) {
        var dom1 = document.getElementById('container1');
        var myChart1 = echarts.init(dom1, null, {
            renderer: 'canvas',
            useDirtyRect: false
        });

        var option1 = {
            title: {
                text: '审核问题订单数量',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: '审核问题订单',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: count, name: '审核问题订单' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        if (option1 && typeof option1 === 'object') {
            myChart1.setOption(option1);
        }

        window.addEventListener('resize', myChart1.resize);
    }

    // 获取审核退回订单的数量
    function getRollbackOrderCount() {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://127.0.0.1:8080/order/getOrderRollbackCount');
        xhr.onreadystatechange = function () {
            if (xhr.readyState === XMLHttpRequest.DONE) {
                if (xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    if (response.code === 0) {
                        var rollbackOrderCount = response.data;
                        drawRollbackOrderChart(rollbackOrderCount);
                    }
                } else {
                    console.error('Error:', xhr.status);
                }
            }
        };
        xhr.send();
    }

    // 绘制审核退回订单的饼状图
    function drawRollbackOrderChart(count) {
        var dom2 = document.getElementById('container2');
        var myChart2 = echarts.init(dom2, null, {
            renderer: 'canvas',
            useDirtyRect: false
        });

        var option2 = {
            title: {
                text: '审核退回订单数量',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: '审核退回订单',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: count.status0, name: '未审核' },
                        { value: count.status1, name: '已通过' },
                        { value: count.status2, name: '已拒绝' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        if (option2 && typeof option2 === 'object') {
            myChart2.setOption(option2);
        }

        window.addEventListener('resize', myChart2.resize);
    }

    // 调用函数获取数据并绘制饼状图
    getProblemOrderCount();
    getRollbackOrderCount();
</script>
</body>
</html>
